<template>
  <div class="fileupload_container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="'/components/main'">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据上传</el-breadcrumb-item>
      <el-breadcrumb-item>栅格数据</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form ref="resetForm" formData :model="formData">
      <!--专题选择-->
      <el-form-item label="所属专题" :label-width="formLabelWidth">
        <el-select v-model="formData.topic"
                   style = "width: 300px"
                   placeholder="请选择所属专题">
          <el-option label="防洪抗旱" value="0"></el-option>
          <el-option label="河流水系" value="1"></el-option>
          <el-option label="水环境" value="2"></el-option>
          <el-option label="水利工程" value="3"></el-option>
          <el-option label="水文" value="4"></el-option>
          <el-option label="水资源" value="5"></el-option>
          <el-option label="统计年鉴" value="6"></el-option>
          <el-option label="政策规划" value="7"></el-option>
          <el-option label="地理空间" value="8"></el-option>
          <el-option label="其他" value="9"></el-option>
        </el-select>
      </el-form-item>
      <!--地区选择-->
      <el-form-item label="所属地区" :label-width="formLabelWidth">
        <div class="block">
          <el-cascader
            v-model="formData.districtList"
            :options="options"
            style = "width: 300px"
          ></el-cascader>
        </div>
      </el-form-item>
      <!--描述输入-->
      <el-form-item label="描述" :label-width="formLabelWidth">
        <el-input
          class="describe"
          type="textarea"
          v-model="formData.summary"
          :autosize="{ minRows: 5}"
          style = "width: 800px"
          placeholder="请简要描述您上传文件的内容"
          maxlength="1000"
          show-word-limit
        ></el-input>
      </el-form-item>
      <div></div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-upload action="" :http-request="xmlbind" class="uploadbtn">
        <el-button size="small" type="primary">点击上传元数据文件</el-button
        ><span class="onlytip">只能上传xml文件</span>
      </el-upload>

      <el-upload action="" :http-request="picturebind" class="uploadbtn">
        <el-button size="small" type="primary">点击上传遥感文件</el-button
        ><span class="onlytip">只能上传遥感影像同名文件(不能为空)</span>
      </el-upload>
      <el-row :gutter="20" class="btnsuru">
        <el-button type="primary" @click="pictureupload" size="small" v-loading.fullscreen.lock="fullscreenLoading"
          >确 定</el-button
        >
        <el-button @click="resetForm('formData')" size="small">取 消</el-button>
      </el-row>
    </div>
  </div>
</template>

<script>
import Uploader from "./Uploader";
import FileUrl from "./models/file-url";
import FileMd5 from "./models/file-md5.js";
import { picturexmlupload } from "../Api/api";
export default {
  name: "BigFileUpload",
  data() {
    return {
        loading: true,
          fullscreenLoading: false,
      // fileList: [],
      dialogFormVisible: false,
      //表单提交数据
      formData: {
        file: [],
        // file: '',
        topic: "",
        districtList: [],
        summary: "",
        desc: "",
        xmlMeta: "",
      },
      formLabelWidth: "120px",
      //地区选择数据
      districtList: [],
      options: [
        {
          value: "湖北",
          label: "湖北省",
          children: [
            {
              value: "武汉",
              label: "武汉市",
              children: [
                {
                  value: "洪山区",
                  label: "洪山区",
                },
                {
                  value: "汉口区",
                  label: "汉口",
                },
                {
                  value: "汉阳区",
                  label: "汉阳",
                },
                {
                  value: "武昌",
                  label: "武昌",
                },
              ],
            },
            {
              value: "襄樊",
              label: "襄樊",
            },
            {
              value: "宜昌",
              label: "宜昌",
            },
            {
              value: "黄石",
              label: "黄石",
            },
            {
              value: "鄂州",
              label: "鄂州",
            },
            {
              value: "随州",
              label: "随州",
            },
            {
              value: "荆州",
              label: "荆州",
            },
            {
              value: "荆门",
              label: "荆门",
            },
            {
              value: "十堰",
              label: "十堰",
            },
            {
              value: "孝感",
              label: "孝感",
            },
            {
              value: "黄冈",
              label: "黄冈",
            },
            {
              value: "咸宁",
              label: "咸宁",
            },
          ],
        },
        {
          value: "湖南",
          label: "湖南省",
          children: [
            {
              value: "长沙",
              label: "长沙",
              children: [
                {
                  value: "芙蓉区",
                  label: "芙蓉区",
                },
                {
                  value: "天心区",
                  label: "天心区",
                },
                {
                  value: "岳麓区",
                  label: "岳麓区",
                },
                {
                  value: "开福区",
                  label: "开福区",
                },
              ],
            },
          ],
        },
      ],
    };
  },

  components: {
    uploader: Uploader,
  },
  watch: {
    files: {
      handler() {
        this.tableData = [];
        this.files.forEach((e) => {
          this.tableData.push({
            name: e.name,
            size: e.size,
            status: e.status,
            id: e.id,
            percent: e.percent,
          });
        });
      },
      deep: true,
    },
  },

  methods: {
    xmlbind(param) {
      let that = this;
      // that.formData.file = param.file;
      that.formData.xmlMeta = param.file;
      // that.formData.append('xmlMeta', param.file);
      console.log(param.file);
      console.log("+++++++++++++++++++");
      console.log(that.formData.xmlMeta);
    },
    picturebind(param) {
      let that = this;
      that.formData.file.push(param.file);
      // that.formData.append('file', param.file);
      console.log("++++++++++++++++++++");
      console.log(that.formData.file);
    },
    pictureupload() {
      // this.fullscreenLoading = true;
      //  setTimeout(() => {
      //     this.fullscreenLoading = false;
      //   }, 2000);
        this.fullscreenLoading = true;
      let that = this;
      let updata = new FormData();
      console.log(that.formData);
      for (let i = 0; i < that.formData.file.length; i++) {
        updata.append("file", that.formData.file[i]);
      }
      updata.append("topic", that.formData.topic);
      let districtStr = "";
      for (let i = 0; i < that.formData.districtList.length; i++) {
        districtStr += that.formData.districtList[i];
      }
      updata.append("district", districtStr);
      updata.append("summary", that.formData.summary);
      let phoneNumber = sessionStorage.getItem("phoneNumber");
      updata.append("uploader", phoneNumber);
      updata.append("xmlMeta", that.formData.xmlMeta);
      picturexmlupload(updata).then(function (res) {

        if (res.data.code === 0) {

          // that.$message({
          //   message: "上传成功",
          //   type: "success",
          // });
          that.fullscreenLoading = false;
          that.$alert("上传成功", {
            confirmButtonText: "确定",
            callback: (action) => {},
          });
        } else {
          that.$message.error("上传失败");
        }
      });
    },
    resetForm() {
      this.$refs.resetForm.resetFields();
    },
  },
};
</script>


<style scoped>
.fileupload_container {
  width: 90%;
  margin: 0 auto;
}
.el-breadcrumb {
  padding-top: 20px;
  padding-bottom: 20px;
}
.describe {
  width: 300px;
}
.dialog-footer {
  margin-left: 120px;
}
.uploadbtn {
  margin-bottom: 20px;
}
.onlytip {
  font-size: 12px;
  color: #909399;
  padding-left: 10px;
}
</style>
<style>
.btnsuru {
  margin: 0px !important;
}
</style>
